<template>
  <el-form v-if="bool" ref="forms" :model="formData" size="small" label-width="100px">
    <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
      <template v-for="(item,index) in formListData">
        <el-col v-if="index <=indexLength" :key="index" :lg="5" :xs="8" >
          <el-form-item :label="item.label" :prop="item.key">

            <el-input
              v-if="item.form_type==='text'"
              v-model="formData[item.key]"
              style="width: 100%;"
              size="mini"
              clearable
              :placeholder="`请输入${item.label}`"
            />

            <div v-if="item.form_type==='pricerange'" style="display:flex;justify-content:space-between;">
              <el-input
                v-model="formData[item.key][0]"
                style="width:48%"
                placeholder="最小金额"
                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                @blur="()=>formData[item.key][0] = Number(formData[item.key][0])"
              />
              <span>-</span>
              <el-input
                v-model="formData[item.key][1]"
                placeholder="最大金额"
                style="width:48%"
                oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                @blur="()=>formData[item.key][1] = Number(formData[item.key][1])"
              />
            </div>

            <el-select
              v-if="item.form_type==='select'&&item.is_search===false"
              v-model="formData[item.key]"
              clearable
              style="width: 100%;"
              :placeholder="`请选择${item.label}`"
            >
              <el-option
                v-for="(itm) in item.options"
                :key="itm"
                :label="itm.label||itm[item?.setting?.label]"
                :value="itm.value||itm[item?.setting?.value]"
              />
            </el-select>

            <el-select
              v-if="item.form_type==='select_product'&&item.is_search===false"
              v-model="formData[item.key]"
              clearable
              style="width: 100%;"
              :placeholder="`请选择${item.label}`"
            >
              <el-option
                v-for="(itm) in item.options"
                :key="itm"
                :label="getProductName(itm)"
                :value="itm.value||itm[item?.setting?.value]"
              />
            </el-select>

            <el-select
              v-if="item.form_type==='select'&&item.is_search===true"
              v-model="formData[item.key]"
              style="width: 100%;"
              filterable
              remote
              reserve-keyword
              clearable
              :placeholder="`请选择${item.label}，可模糊搜索`"
              :remote-method="(query)=>{remoteMethod(query,index)}"
              :loading="loading"
            >
              <el-option
                v-for="itm in item.options"
                :key="itm.value"
                :label="itm[item.setting.label]"
                :value="itm[item.setting.value]"
              >
                <div>{{ itm[item.setting.label] }}</div>
              </el-option>
            </el-select>

            <date-picker
              v-if="item.form_type==='date'"
              v-model:date="formData[item.key]"
              clearable
              style="width: 100%;"
              :placeholder="`请选择${item.label}`"
            />

            <date-range-picker
              v-if="item.form_type==='daterange'"
              v-model:date="formData[item.key]"
              clearable
              style="width: 100%;"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />

            <el-cascader
              v-if="item.form_type==='cascader'"
              ref="cascader"
              v-model="formData[item.key]"
              style="width: 100%;"
              :options="citys"
              placeholder="请选择地区"
              :collapse-tags="item.multiple"
              :props="{ multiple: item.multiple,checkStrictly: item.checkStrictly, expandTrigger: 'hover', label: 'regionName', value:'regionCode' }"
              clearable
            />

          </el-form-item>
        </el-col>
      </template>
      <el-col :lg="4" :xs="8">
        <el-form-item label-width="0" style="width:100%">
            <div style="width: 260px;flex-shrink: 0">
                <more-search-btn v-model:is-more="visible" v-if="searchBtn" />
                <el-button size="small" class="border-btn" @click="onReset">重置</el-button>
                <el-button type="primary" size="small" class="main-btn" @click="onSubmit">搜索</el-button>
            </div>
        </el-form-item>
      </el-col>

    </el-row>

    <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
      <template v-if="visible">
        <template v-for="(item,index) in formListData">
          <el-col v-if="index > indexLength" :key="index" :lg="5" :xs="8">
            <el-form-item :label="item.label" :prop="item.key">

              <el-input
                v-if="item.form_type==='text'"
                v-model="formData[item.key]"
                style="width: 100%;"
                size="small"
                clearable
                :placeholder="`请输入${item.label}`"
              />

              <div v-if="item.form_type==='pricerange'" style="display:flex;justify-content:space-between;">
                <el-input
                  v-model="formData[item.key][0]"
                  style="width:48%"
                  placeholder="最小金额"
                  oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                  @blur="()=>formData[item.key][0] = Number(formData[item.key][0])"
                />
                <span>-</span>
                <el-input
                  v-model="formData[item.key][1]"
                  placeholder="最大金额"
                  style="width:48%"
                  oninput="value=value.replace(/^\.+|[^\d.]/g,'')"
                  @blur="()=>formData[item.key][1] = Number(formData[item.key][1])"
                />
              </div>

              <el-select
                v-if="item.form_type==='select'&&item.is_search===false"
                v-model="formData[item.key]"
                clearable
                style="width: 100%;"
                :placeholder="`请选择${item.label}`"
              >
                <el-option
                  v-for="(itm) in item.options"
                  :key="itm"
                  :label="itm.label||itm[item.setting.label]"
                  :value="itm.value||itm[item.setting.value]"
                />
              </el-select>

              <el-select
                v-if="item.form_type==='select'&&item.is_search===true"
                v-model="formData[item.key]"
                style="width: 100%;"
                filterable
                remote
                reserve-keyword
                clearable
                :placeholder="`请选择${item.label}，可模糊搜索`"
                :remote-method="(query)=>{remoteMethod(query,index)}"
                :loading="loading"
              >
                <el-option
                  v-for="itm in item.options"
                  :key="itm.value"
                  :label="itm[item.setting.label]"
                  :value="itm[item.setting.value]"
                >
                  <div>{{ itm[item.setting.label] }}</div>
                </el-option>
              </el-select>

              <date-picker
                v-if="item.form_type==='date'"
                v-model:date="formData[item.key]"
                clearable
                style="width: 100%;"
                :placeholder="`请选择${item.label}`"
              />

              <date-range-picker
                v-if="item.form_type==='daterange'"
                v-model:date="formData[item.key]"
                clearable
                style="width: 100%;"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />

              <el-cascader
                v-if="item.form_type==='cascader'"
                ref="cascader"
                v-model="formData[item.key]"
                style="width: 100%;"
                :options="citys"
                placeholder="请选择地区"
                :collapse-tags="item.multiple"
                :props="{ multiple: item.multiple,checkStrictly: item.checkStrictly, expandTrigger: 'hover', label: 'regionName', value:'regionCode' }"
                clearable
              />

            </el-form-item>
          </el-col>
        </template>
      </template>
    </el-row>

  </el-form>
</template>

<script>
import {inject, onMounted, reactive, ref, toRefs,} from 'vue'
import area from '@/utils/area.js'

export default {
  name: 'Search',
  props: {
    popoverWidth: {
      type: Number,
      default: 350,
    },
    left: {
      type: String,
      default: '0px',
    },
    right: {
      type: String,
      default: '0px',
    },
    btnTitle: {
      type: String,
      default: '更多搜索',
    },
    formList: {
      type: Array,
      default: () => {
        return [
          {
            key: 'status',
            label: '状态',
            form_type: 'select',
            value: 2,
            is_search: false,
            options: [
              { label: '草稿', value: 0 },
              { label: '审核中', value: 1 },
              { label: '审核通过', value: 2 },
              { label: '审核不通过', value: 3 },
            ],
          },
           {
            key: 'id',
            label: '状态',
            form_type: 'select_product',
            value: 2,
            is_search: false,
            options: [],
          },
          {
            key: 'key_word',
            label: '模糊搜索',
            form_type: 'select',
            value: '',
            is_search: true,
            loading: false,
            setting: {
              api_file: '',
              api_name: '',
              key_word: '',
              label: '',
              value: '',
            },
            options: [],
          },
          {
            key: 'name',
            label: '关键字',
            form_type: 'text',
            value: '',
            is_search: false,
            options: [],
          },
          {
            key: 'priceRange',
            label: '金额范围',
            form_type: 'pricerange',
            value: [],
            is_search: false,
            options: [],
          },
          {
            key: 'date_range',
            label: '日期范围',
            form_type: 'daterange',
            value: [],
            is_search: false,
            options: [],
          },
          {
            key: 'date',
            label: '创建时间',
            form_type: 'date',
            value: [],
            is_search: false,
            options: [],
          },
          {
            key: 'area',
            label: '所在地区',
            form_type: 'cascader',
            value: [],
            is_search: false,
            multiple: false,
            checkStrictly: false,
            options: [],
          },
        ]
      },
    },
    indexLength:{
      type:Number,
      default:2
    },
    searchBtn:{
       type: Boolean,
      default: true,
    }
  },
  emits: ['onConfirm', 'onReset'],
  setup(props, context) {
    const api = inject('api')
    var forms = ref(null)
    var bool = ref(false) // 未解决动态form prop 初始不响应
    var visible = ref(false)
    var popWidth = props.popoverWidth
    var marginLeft = props.left
    var marginRight = props.right
    var reactiveData = reactive({
      formListData: props.formList,
    })
    const citys = area
    const defaultTime = ref([
      new Date(2000, 1, 1, 0, 0, 0),
      new Date(2000, 2, 1, 23, 59, 59),
    ])
    var loading = ref(false)

    var formData = reactive({})
    const formOperation = () => {
      for (let i = 0; i < reactiveData.formListData.length; i++) {
        formData[reactiveData.formListData[i].key] =
            reactiveData.formListData[i].value
      }
    }

    const remoteMethod = async(query, index) => {
      var itemObj = reactiveData.formListData[index]
      if (query !== '') {
        reactiveData.formListData[index].loading = true
        var pro = await api[itemObj.setting.api_file][itemObj.setting.api_name](
          {
            [itemObj.setting.key_word]: query,
          }
        )
        if (pro.code === 0) {
          reactiveData.formListData[index].options = pro.data.list
        } else {
          reactiveData.formListData[index].options = []
        }
        reactiveData.proLoading = false
      } else {
        reactiveData.formListData[index].options = []
      }
    }
    const onReset = () => {
      context.emit('onReset')
      forms.value.resetFields()
    }
    const onSubmit = () => {
      console.log('确定', formData)
      context.emit('onConfirm', formData)
      //visible.value = false
    }
    const onCancel = () => {
     // visible.value = false
      // onReset()
    }
    onMounted(() => {
      formOperation()
      bool.value = true
      console.log(formData)
    })

    return {
      ...toRefs(props),
      ...toRefs(reactiveData),
      citys,
      bool,
      visible,
      loading,
      forms,
      popWidth,
      marginLeft,
      marginRight,
      formData,
      defaultTime,
      remoteMethod,

      onSubmit,
      onCancel,
      onReset,
    }
  },

}

</script>

<style scoped>
  /* @import url(); 引入css类 */
</style>
